import React from "react";
import "./index.css";
import {
  Button,
  Form,
  Input,
  DatePicker,
  Table,
  Switch,
  message,
  Spin,
} from "antd";
import {
  PlusOutlined,
  DeleteOutlined,
  SearchOutlined,
  EditOutlined,
} from "@ant-design/icons";
//引入添加商品的api
import * as http from "@/api/product";
// import Dialog from "@/components/ProductManagement/Dialog"
class Refund extends React.Component {
  constructor() {
    super();
    let _this = this;
    this.rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(
          `selectedRowKeys: ${selectedRowKeys}`,
          "selectedRows: ",
          selectedRows
        );
      },
      getCheckboxProps: (record) => ({
        disabled: record.name === "Disabled User", // Column configuration not to be checked
        name: record.name,
      }),
    };
    this.state = {
      dialogVisible: false,
      actionType: "添加商品",
      tableLoading: true,
      columns: [
        {
          title: "订单编号",
          dataIndex: "order_id",
          align: "center",
        },
        {
          title: "产品名称",
          dataIndex: "productName",
          align: "center",
        },
        {
          title: "交易金额",
          dataIndex: "total_fee",
          align: "center",
        },
        {
          title: "退款金额",
          dateIndex: "operation",
          align: "center",
        },
        {
          title: "交易时间",
          dataIndex: "orderDetail[]",
          align: "center",
        },
        {
          title: "退款数量",
          dataIndex: "create_time",
          align: "center",
        },
        {
          title: "状态",
          dataIndex: "updateTime",
          align: "center",
        },
        {
          title: "说明",
          dataIndex: "updateTime",
          align: "center",
        },
        {
          title: "操作",
          dateIndex: "operation",
          align: "center",
          render(row) {
            return (
              <div className="action_button">
                <Button type="primary" onClick={_this.delete.bind(_this, row)}>
                  退款
                </Button>
                <Button
                  type="primary"
                  onClick={_this.edit.bind(_this, row)}
                  icon={<EditOutlined />}
                ></Button>
                <Button
                  type="primary"
                  onClick={_this.delete.bind(_this, row)}
                  danger
                  icon={<DeleteOutlined />}
                ></Button>
              </div>
            );
          },
        },
      ],
      dataSource: [],
    };
  }
  //是否上架切换按钮
  sellSwitchChange(row, switched) {
    console.log(row);
  }
  // 选择日期时触发的事件
  onDateChange() {}
  //编辑按钮
  edit(row) {
    console.log(row);
  }
  //删除按钮
  delete(row) {
    console.log(row);
  }
  //添加按钮
  addProduct() {
    this.setState({
      dialogVisible: true,
    });
  }

  //渲染表格数据

  updateProductList(order_id = "") {
    http.postOrder(order_id).then((res) => {
      console.log("res", res);
      this.setState({
        //关闭表格的加载
        tableLoading: false,
      });
      if (res.data.state) {
        //映射处理之后的数据,加了key字段
        let dataSource = res.data.data.map((item) => {
          return {
            key: item.order_id,
            ...item,
          };
        });

        //获取成功
        this.setState({
          dataSource,
        });
      }
    });
  }

  componentDidMount() {
    //组件挂载之后
    this.updateProductList();
  }
  //关闭dialog
  hideDialog() {
    this.setState({
      dialogVisible: false,
    });
  }
  render() {
    return (
      <div className="list_container">
        {/* <Dialog onCancel={this.hideDialog.bind(this)} onAddProduct={this.handleAddProduct.bind(this)} dialogVisible={this.state.dialogVisible} actionType={this.state.actionType}></Dialog> */}

        {/* 中间操作部分 */}
        {/* 表格部分 */}
        <div className="table">
          <Table
            loading={this.state.tableLoading}
            bordered
            rowSelection={this.rowSelection}
            columns={this.state.columns}
            dataSource={this.state.dataSource}
          ></Table>
        </div>
      </div>
    );
  }
}

export default Refund;
